<template>
  <el-form-item label="店铺名称" :prop="props.prop">
    <el-select
      clearable
      filterable
      v-model="value"
      value-key="id"
      :placeholder="placeholder"
      class="!w-240px"
      @change="onShopChange"
    >
      <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item" />
    </el-select>
  </el-form-item>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { ShopInfoApi, ShopInfoVO } from '@/api/mall/shop/info'

defineOptions({ name: 'ShopPicker' })

const props = defineProps({
  id: propTypes.number.def(0),
  prop: propTypes.string.def('shopId'),
  placeholder: propTypes.string.def('请选择店铺')
})

const value = ref<ShopInfoVO>()
const shopList = ref<ShopInfoVO[]>([])
const emit = defineEmits(['picked'])

const onShopChange = () => {
  console.log('onShopChange: value=' + value)
  emit('picked', value.value?.id)
}

onMounted(async () => {
  let list = await ShopInfoApi.getShopInfoSimpleList()
  shopList.value = list //[{ id: 0, name: '系统默认', logo: '' }, ...list]
})

watch(
  () => props.id,
  async (id: number | string) => {
    if (id === 0) {
      value.value = { id: 0, name: '系统默认', logo: '' } as ShopInfoVO
      return
    }
    value.value = await ShopInfoApi.getShopInfo(id)
  }
)
</script>
